<template>
	<view class="wrapper">

		<!-- 步骤 -->
		<Steps :active="active"></Steps>
		<view class="concat_wrapper" v-if="active===1">
			<u-cell :border="false">
				<u--text slot="title" text="机构信息" size="18" lineHeight="20" bold></u--text>
				<u--text slot="value" text="联系房东" prefixIcon="phone-fill" align="right" size="15" color="#f56e3d"
					@click.native="contactLandlord(info)" iconStyle="color:#f56e3d"></u--text>
			</u-cell>
			<view class="">
				<u-cell :border="false">
					<u--text slot="title" text="【机构名称】" size="16" lineHeight="20"></u--text>
					<u--text slot="value" :text="info.landlordName" align="right" size="16" lineHeight="20"
						style="margin-left: -30%;"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="【备注内容】" size="16" lineHeight="20"></u--text>
					<u--text slot="value" :text="info.remark" align="right" size="16" lineHeight="20"
						style="margin-left: -30%;"></u--text>
				</u-cell>
			</view>
		</view>

		<view class="">
			<u-cell :border="false">
				<u--text slot="title" text="房源信息" size="18" lineHeight="20" bold></u--text>
				<!-- 		<u--text slot="value" v-if="active!==1" text="联系房东" @click.native="contactLandlord(info)" align="right"
					size="16" lineHeight="20"></u--text> -->
				<u--text slot="value" v-if="active!==1" text="联系房东" prefixIcon="phone-fill" align="right" size="15"
					color="#f56e3d" @click.native="contactLandlord(info)" iconStyle="color:#f56e3d"></u--text>
			</u-cell>
			<view class="concat_wrapper">

				<u-cell :border="false">
					<u--text slot="title" text="【门牌号】" size="16" lineHeight="20"></u--text>
					<u--text slot="value" :text="info.ventricleNumber" align="right" size="16" lineHeight="20"
						style="margin-left: -30%;"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="【出租类型】" size="16" lineHeight="20"></u--text>
					<u--text slot="value" :text="info.rentalType==='0'?'合租':'整租'" align="right" size="16"
						lineHeight="20" style="margin-left: -30%;"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="【房源详情】" size="16" lineHeight="20"></u--text>
					<u--text slot="value" :text="info.houseName" align="right" size="16" lineHeight="20"
						style="margin-left: -30%;"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="【小区地址】" size="16" lineHeight="20"></u--text>
					<u--text slot="value" :text="info.locationAddress" align="right" size="16" lineHeight="20"
						style="margin-left: -30%;"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="【每月租金】" size="16" lineHeight="20"></u--text>
					<u--text slot="value" :text="info.rental" align="right" size="16" lineHeight="20"
						style="margin-left: -30%;"></u--text>
				</u-cell>
			</view>
		</view>

		<view class="active_wrapper" v-if="active===1">
			<view class="">
				<u-cell :border="false">
					<view slot="title" style="display: flex;justify-content: flex-start;">
						<view class="">
							<u--text text="拍照验房" size="18" lineHeight="20" bold :block='false'>
							</u--text>
						</view>

						<u--text text="(带*为必填项)" size="13" lineHeight="20" color="#d33627" :block='false'></u--text>
					</view>
				</u-cell>
			</view>

			<view class="">
				<u-cell :border="false">
					<view slot="title">
						<u-cell :border="false">
							<view slot="title" style="display: flex;justify-content: flex-start;">
								<view class="">
									<u--text text="楼栋门牌" size="15" lineHeight="20" :block='false'>
									</u--text>
								</view>
								<u--text text="*" size="13" lineHeight="20" color="red" :block='false'></u--text>
							</view>
						</u-cell>
					</view>
					<view slot="value" style="display: flex;">
						<view class="item" v-for="(item, index) in stairTypeList" :key="index"
							style="margin-left: 10rpx;">
							<u-tag @click="params.stairType =item.value" style="margin: 5px 20px 5px 0;"
								:text="item.label" size="mini" type="info" color="#666"
								:bgColor="item.value === params.stairType ? 'rgba(247,197,141,1)' : '#eee'"
								borderColor='transparent'></u-tag>
						</view>
					</view>
				</u-cell>
				<view class="" style="padding:0 50rpx;">
					<Upload @change="(list,img)=>{uploadChange(list,img,'楼栋门牌')}"></Upload>
				</view>

			</view>
			<view class="">
				<view class="">
					<u-cell :border="false">
						<view slot="title" style="display: flex;justify-content: flex-start;padding-left: 28rpx;">
							<view class="">
								<u--text text=" 小区环境" size="15" lineHeight="20" :block='false'>
								</u--text>

							</view>
						</view>
					</u-cell>
				</view>
				<view class="" style="padding:0 50rpx;">
					<Upload@change="(list,img)=>{uploadChange(list,img,'小区环境')}" ></Upload>
				</view>

			</view>
			<view class="" style="padding: 20rpx 40rpx; ">
				<view class="" style="padding-bottom: 20rpx;">
					<u--text text="钥匙存放地点" size="18" lineHeight="20" bold></u--text>
				</view>
				<view class="tag_wrp">
					<view class="item" v-for="(item, index) in keyStoreList" :key="index">
						<u-tag @click="params.houseKey=item" style="margin: 5px 20px 5px 0;" :text="item" size="mini"
							type="info" color="#696969"
							:bgColor="params.houseKey===item ? 'rgba(247,197,141,1)' : '#eee'"
							borderColor='transparent'></u-tag>
					</view>
					<view v-if="params.houseKey.includes('密码')">
						<u-button text="新密码" color="#f56e3d" style="height: 65rpx;"></u-button>
					</view>

					<view v-if="params.houseKey.includes('位置')">
						<u-button text="新位置" color="#f56e3d" style="height: 65rpx;"></u-button>

					</view>
					<view v-if="params.houseKey.includes('密码')||params.houseKey.includes('位置')"
						style="margin-left: 2%;">
						<u-input v-model="params.pwdOrPosition" type="text" style="border: 1px solid #ccc;"
							maxlength='10' border-color="#808080" />
					</view>
				</view>

			</view>
		</view>

		<view class="active_wrapper" v-if="active===2">
			<view class="">
				<view class="">
					<u-cell :border="false">
						<view slot="title" style="display: flex;justify-content: flex-start;">
							<view class="">
								<u--text text="拍照验房" size="16" lineHeight="20" bold :block='false'>
								</u--text>
							</view>
							<u--text text="(带*为必填项)" size="13" lineHeight="20" color="red" :block='false'></u--text>
						</view>
					</u-cell>
				</view>

				<view class="">
					<u-cell :border="false">
						<view slot="title" style="display: flex;justify-content: flex-start;padding-left: 28rpx;">
							<view class="">
								<u--text text="卧室" size="15" lineHeight="20" :block='false'>
								</u--text>
							</view>
							<u--text text="* (不低于三张且至少包含一部视频)" size="13" lineHeight="20" color="red" :block='false'></u--text>
							 
						</view>
					</u-cell>
				</view>
				<view style="padding:0 50rpx;display: inline-block;">
					<Upload @change="(list,img)=>{uploadChange(list,img,'卧室')}" @imgchecked="imgchecked" :showImg="true"  ></Upload>
				</view>

				<view class="">
					<u-cell :border="false">
						<view slot="title" style="display: flex;justify-content: flex-start;padding-left: 28rpx;">
							<view class="">
								<u--text text="客厅" size="15" lineHeight="20" :block='false'>
								</u--text>
							</view>
								<u--text text="* (至少上传两张图片)" size="13" lineHeight="20" color="red" :block='false'></u--text>
						</view>
					</u-cell>
				</view>
				<view class="" style="padding:0 50rpx;">
					<Upload @change="(list,img)=>{uploadChange(list,img,'客厅')}"  ></Upload>
				</view>


				<view class="">
					<u-cell :border="false">
						<view slot="title" style="display: flex;justify-content: flex-start;padding-left: 28rpx;">
							<view class="">
								<u--text text="阳台" size="15" lineHeight="20" :block='false'>
								</u--text>
							</view>
							<u--text text="* (至少上传一张图片)" size="13" lineHeight="20" color="red" :block='false'></u--text>
						</view>
					</u-cell>
				</view>
				<view class="" style="padding:0 50rpx;">
					<Upload@change="(list,img)=>{uploadChange(list,img,'阳台')}" ></Upload>
				</view>

				<view class="">
					<u-cell :border="false">
						<view slot="title" style="display: flex;justify-content: flex-start;padding-left: 28rpx;">
							<view class="">
								<u--text text="厨房" size="15" lineHeight="20" :block='false'>
								</u--text>
							</view>
							<u--text text="* (至少上传一张图片)" size="13" lineHeight="20" color="red" :block='false'></u--text>
						</view>
					</u-cell>
				</view>
				<view class="" style="padding:0 50rpx;">
					<Upload @change="(list,img)=>{uploadChange(list,img,'厨房')}"></Upload>
				</view>


				<view class="">
					<u-cell :border="false">
						<view slot="title" style="display: flex;justify-content: flex-start;padding-left: 28rpx;">
							<view class="">
								<u--text text="卫生间" size="15" lineHeight="20" :block='false'>
								</u--text>
							</view>
							<u--text text="* (至少上传一张图片)" size="13" lineHeight="20" color="red" :block='false'></u--text>
						</view>
					</u-cell>
				</view>
				<view class="" style="padding:0 50rpx;">
					<Upload @change="(list,img)=>{uploadChange(list,img,'卫生间')}"></Upload>
				</view>


			</view>
		</view>

		<view class="active_wrapper" v-if="active===3">
			<view class="active_wrapper3">
				<view class="">
					<u--text text="房源属性" size="16" lineHeight="38" bold></u--text>
				</view>
				<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"> -->
				<view class="tag_wrp">
					<view class="item" v-for="(item, index) in householdElectricalList" :key="index">
						<u-tag @click="houseDeviceListClick(item)" style="margin: 5px 20px 5px 0;"
							:text="item.labelName" size="mini" type="info" color="#666"
							:bgColor="params.houseDeviceList.includes(item) ? 'rgba(247,197,141,1)' : '#eee'"
							borderColor='transparent'></u-tag>
					</view>
				</view>
				</scroll-view>
			</view>
		</view>
		<view class="active_wrapper4" v-if="active===4">
			<view class="">
				<view class="">
					<u--text text="房间印象" size="16" lineHeight="38" bold></u--text>
				</view>
				<u--text text="*" size="13" lineHeight="20" color="red" :block='false'></u--text>
				<view class="tag_wrp">
					<u--textarea v-model="params.myComment" placeholder="请输入内容" count maxlength='200'></u--textarea>
				</view>
			</view>
		</view>
		
		
		<u-popup :show="cancelReasonShow" mode="center"  @close="closeCancelReasonAlert()"
		                    
							   :closeable="true"
							   :closeOnClickOverlay="true" 
							   style="width:550rpx;">
							   <u-toast ref="uToast"></u-toast>
		  <view style="width:550rpx;">
		     
			  <!-- 弹窗输入组件 -->
			       
					<u--textarea
					                            
												placeholder="请输入不可勘察原因"
												v-model="inputValue"
												maxlength="50"
												count
											></u--textarea>
										<view style="margin-top: 5%;">
										
											<u-button  color="#f56e3d" text="确定" @click="clickCheck(4)" style="width: 30%;margin-left: 60%;height: 70rpx;"></u-button>
										</view>	
											
		   </view>
		 </u-popup>
		
		<!-- 底部操作 -->
		<view class="bottom">
			<view class="time" style="z-index: 100;">
				<u-count-down :time="info.timeLeft?info.timeLeft*1000:0" format="HH:mm:ss" color=''
					style=""></u-count-down>
			</view>
			</u-alert>
			<view class="btns">
				<u-button type="info" text="取消勘察" customStyle="color:#f56e3d" @click="showCancelReason()"></u-button>
				<view class="space"></view>
				<u-button v-if='active<4' text="下一步" color="#f56e3d" @click="clickSteps"></u-button>
				<u-button v-else text="提交" color="#f56e3d" @click="clickSubmit"></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import {
		survey,addMedia
	} from '@/api/survey/index.js'
	import Steps from './Steps.vue'
	import Upload from '@/components/Upload/index.vue';

	export default {
		components: {
			Steps,
			Upload
		},
		data() {
			return {
				checkedImg: "",
				pwdOrPositionShow: false,
				isShowBorder: true,
				info: {},
				houseKeyBgColor: '#F5F5F5',
				active: 1,
				curType: '',
				useType: '',
				inputValue:'',
				cancelReasonShow:false,
				// 提交数据
				params: {
					// 楼梯', '电梯'
					stairType: '',
					// 钥匙存放地点
					houseKey: '',
					// 钥匙存放地点索引
					houseKeyIndex: 1,
					// 家具 家电
					houseDeviceList: [],
					// 其他
					labelList: [],
					//密码或者其他位置信息
					pwdOrPosition: '',
					// 印象
					myComment: ''
				},
				stairTypeList: [{
					label: '电梯',
					value: 1
				}, {
					label: '楼梯',
					value: 0
				}, ],
				keyStoreList: [
					'密码锁',
					'消防栓',
					'水表箱',
					'电表箱',
					'物业保安',
					'牛奶箱',
					'门口地毯',
					'其他位置',
					'房东手里',
				],
				householdElectricalList: [
					// '电视',
					// '洗衣机',
					// '空调',
					// '冰箱',
					// '烤箱',
					// '饮水机',
					// '电扇',
					// '电磁灶',
					// '抽油烟机',
					// '热水器',
				],
				furnitureList: [
					'沙发',
					'床',
					'衣柜',
					'餐桌椅',
					'床头柜',
					'鞋柜',
					'书桌',
				],
				otherList: [
					'独卫',
					'独厨',
					'密码锁',
					'清洁工具',
				],
				imgVieoList: {

				},
			}
		},
		onLoad(option) {
			this.id = option.id
			this.houseId = option.houseId
			survey.taskDetail({
				id: this.id
			}).then(res => {

				if (res.data.code == 200) {
					this.info = res.data.data
					for (var i = 0; i < this.keyStoreList.length; i++) {
						if (this.info.houseKey == i) {
							if (this.info.houseKey == '0') {
								this.keyStoreList[0] = '密码:' + this.info.pwdOrPosition
								this.params.houseKey = this.keyStoreList[0]
								this.params.houseKeyIndex = 0
								break
							}
							if (this.info.houseKey == '7') {
								this.keyStoreList[7] = '位置:' + this.info.pwdOrPosition
								this.params.houseKey = this.keyStoreList[7]
								this.params.houseKeyIndex = 7
								break
							}
							this.params.houseKey = this.keyStoreList[i]
							this.params.houseKeyIndex = i
							break
						}

					}


					if (this.info.stairType == '0') {
						this.params.stairType = 0
					}
					if (this.info.stairType == '1') {
						this.params.stairType = 1
					}
					this.label()
				}
			});
			this.insertAppLoaction()
		},
		methods: {
			
			showCancelReason(){
				this.cancelReasonShow=true;
			},
			closeCancelReasonAlert(){
				this.cancelReasonShow=false;
				this.inputValue=null;
				uni.$emit('refresh')
			},
			
			imgchecked(img) {
				this.checkedImg = img
			},
			/* 	showOr(){
					this.pwdOrPositionShow=true
				}, */
			label() {
				survey.labelList().then(res => {
					if (res.data.code == 200) {
						this.householdElectricalList = res.data.rows
					}
				});
			},
			// 多选处理 参数 1点击项  参数2 需要更新的数据   (备注 二次点击即为取消)
			mulHandle(item, data = []) {
				var index = data.indexOf(item)
				if (index !== -1) {
					data.splice(index, 1)
				} else {
					data.push(item)
				}
			},
			checkboxChanged(e) {
				this.mainImageIndex = e.detail.value[0];
			},
			// 家具furnitureList 家电 householdElectricalList
			houseDeviceListClick(item) {
				// 类型 当前
				this.mulHandle(item, this.params.houseDeviceList)
			},
			clickCancel() {
				uni.switchTab({
					url: '/pages/survey/survey?refresh=' + true
				})
			},
			uploadChange(list, img, tag) {
				this.imgVieoList[tag] = list
			},
			clickSteps() {

				//检测当前是第几步
				if (this.active == 1) {
					if (typeof this.imgVieoList['楼栋门牌'] == 'undefined') {
						this.$refs.uToast.show({
							message: '请上传门牌照片!',
							type: "error"
						})
					} else {
						this.active = this.active + 1
					}
				} else if (this.active == 2) {
					
					//合租还是整租，合租卧室不低于三张其余分类照片不做要求，整租卧室不低于三张 客厅不低于2张 卫生间厨房阳台不低于一张
					if (this.info.rentalType == '0') {
						//合租
					
						if (typeof this.imgVieoList['卧室'] == 'undefined') {
							this.$refs.uToast.show({
								message: '请上传卧室照片!',
								type: "error"
							})
							return
						} else {
							if(!this.checkedImg) {
								this.$refs.uToast.show({
									message: '请选择卧室主图',
									type: "error"
								})
								
								return 
							}
							if (this.imgVieoList['卧室'].length < 3) {
								this.$refs.uToast.show({
									message: '卧室照片上传不低于3张!',
									type: "error"
								})
								
								
							} else {

								var flag = 0
								for (let key in this.imgVieoList) {
								 
									const list = this.imgVieoList[key] || []
									list.forEach(item => {
										const imgFlag = ['mp4']
											.includes(item.substr(item.lastIndexOf(".") + 1).toLowerCase())
										if (imgFlag) {
											flag = flag + 1;
										}
									})
								}
								if (flag == 0) {
									this.$refs.uToast.show({
										message: '至少上传一个视频!',
										type: "error"
									})
									return;
								} else {
									this.active = this.active + 1
								}


							}

						}
					} else {
						//整租
						if (typeof this.imgVieoList['卧室'] == 'undefined') {
							this.$refs.uToast.show({
								message: '请上传卧室照片!',
								type: "error"
							})
							return
						} else if (typeof this.imgVieoList['客厅'] == 'undefined') {
							this.$refs.uToast.show({
								message: '请上传客厅照片!',
								type: "error"
							})
							return
						} else if (typeof this.imgVieoList['厨房'] == 'undefined') {
							this.$refs.uToast.show({
								message: '请上传厨房照片!',
								type: "error"
							})
							return
						} else if (typeof this.imgVieoList['卫生间'] == 'undefined') {
							this.$refs.uToast.show({
								message: '请上传卫生间照片!',
								type: "error"
							})
							return
						} else if (typeof this.imgVieoList['阳台'] == 'undefined') {
							this.$refs.uToast.show({
								message: '请上传阳台照片!',
								type: "error"
							})
						} else {
							if (this.imgVieoList['卧室'].length < 3) {
								this.$refs.uToast.show({
									message: '卧室照片上传不低于3张!',
									type: "error"
								})
								return
							}
							if (this.imgVieoList['客厅'].length < 2) {
								this.$refs.uToast.show({
									message: '客厅照片上传不低于2张!',
									type: "error"
								})
								return
							}
							if (this.imgVieoList['厨房'].length < 1) {
								this.$refs.uToast.show({
									message: '厨房照片上传不低于1张!',
									type: "error"
								})
								return
							}
							if (this.imgVieoList['卫生间'].length < 1) {
								this.$refs.uToast.show({
									message: '卫生间照片上传不低于3张!',
									type: "error"
								})
								return
							}
							if (this.imgVieoList['阳台'].length < 1) {
								this.$refs.uToast.show({
									message: '卫生间照片上传不低于1张!',
									type: "error"
								})
								return
							}
							
							if(!this.checkedImg) {
								this.$refs.uToast.show({
									message: '请选择卧室主图',
									type: "error"
								})
								
								return 
							}
							

							var flag = 0
							for (let key in this.imgVieoList) {
								const list = this.imgVieoList[key] || []
								list.forEach(item => {
									const imgFlag = ['mp4']
										.includes(item.substr(item.lastIndexOf(".") + 1).toLowerCase())
									if (imgFlag) {

										flag = flag + 1;
									}
								})
							}

							if (flag == 0) {
								this.$refs.uToast.show({
									message: '至少上传一个视频!',
									type: "error"
								})
								return;
							} else {
								this.active = this.active + 1
							}


						}
					}
				} else if (this.active == 3) {
					if (this.params.houseDeviceList.length < 3) {
						this.$refs.uToast.show({
							message: '房源属性选择不低于3项!',
							type: "error"
						})
						return
					} else {
						this.active = this.active + 1
					}
				}

			},
			clickSubmit() {

			
				// 图片
				const mediaList = []
				for (let key in this.imgVieoList) {
					const list = this.imgVieoList[key] || []
					list.forEach(item => {
						const imgFlag = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
							.includes(item.substr(item.lastIndexOf(".") + 1).toLowerCase())
						// 分类(0图片，1视频)
						mediaList.push({
							mediaLabel: key,
							mediaType: imgFlag ? '0' : '1',
							isPoster: item == this.checkedImg ?  '1' : '0',
							mediaUrl: item,
						})
					})
				}

				if (this.params.myComment == '') {
					this.$refs.uToast.show({
						message: '请填写房间勘察印象！',
						type: "error"
					})
					return;
				} else {
					if (this.params.myComment.length < 7) {
						this.$refs.uToast.show({
							message: '写的太少了少年，不低于7个字哦！',
							type: "error"
						})
						return;
					}
				}

				const params = {
					stairType: this.params.stairType,
					houseKey: this.params.houseKeyIndex,
					myComment: this.params.myComment,
					mediaList,
					labelList: this.params.houseDeviceList,
					id: this.id,
					houseId: this.houseId,
					pwdOrPosition: this.params.pwdOrPosition
				}

				survey.check(params).then(res => {
					if (res.data.code == 200) {
						uni.switchTab({
							url: '/pages/survey/survey',
							success() {
								uni.$emit('refresh')
							}
						})
					}
				});

			},
			clickCheck(flag) {
				
				
				if(flag==4){
					if(this.inputValue==null||this.inputValue==""){
						this.$refs.uToast.show({
							message: '请填写取消勘验原因！',
							type: "error"
						})
						return;
					}else{
						survey.ensure({
							remark:this.inputValue,
							ensure: flag,
							id: this.id
						}).then(res => {
							if (res.data.code == 200) {
								uni.switchTab({
									url: '/pages/survey/survey',
									success() {
										uni.$emit('refresh')
									}
								})
							}
						});
					}
				}else{
					this.inputValue="可勘验";
					survey.ensure({
						remark:this.inputValue,
						ensure: flag,
						id: this.id
					}).then(res => {
						if (res.data.code == 200) {
							uni.switchTab({
								url: '/pages/survey/survey',
								success() {
									uni.$emit('refresh')
								}
							})
						}
					});
				}
				
				
				

			},

			insertAppLoaction() {

				uni.getLocation({
					type: 'gcj02s',
					highAccuracyExpireTime: 300,
					success: (obj) => {
						console.log(obj, 5555)
						let getState = obj.errMsg;
						if (getState == 'getLocation:ok') {
							this.longitude = obj.longitude;
							this.latitude = obj.latitude;
						}
					},
					fail(err) {

						uni.showToast({
							mask: true,
							icon: 'none',
							title: '请打开APP的位置权限！'
						});

						uni.showToast({
							mask: true,
							icon: 'none',
							title: err
						});
					},
					complete: () => {
						let uid = uni.getStorageSync("uid")
						const token = uni.getStorageSync('token');
						const location = {
							"requestPath": 2,
							"longitude": this.longitude,
							"latitude": this.latitude,
							"userId": uid
						}


						survey.insertAppLoaction(location).then(res => {
							console.log(res, 455)
						});

					}
				});


			},

			contactLandlord({
				landlordPhone
			}) {
				uni.makePhoneCall({
					phoneNumber: landlordPhone
				});
			},

		},
	}
</script>

<style scoped lang="scss">
	.wrapper {
		padding-bottom: 150px;

		.bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			z-index: 100;
			.time {
				height: 80rpx;
				background-color: #fff4de;
				display: flex;
				justify-content: center;
				align-items: center;

				/deep/ .u-count-down__text {
					color: #eeaf78;
				}
			}

			.btns {
				display: flex;
				padding: 30rpx 60rpx 40rpx 60rpx;
				justify-content: space-between;

				.space {
					width: 40rpx;
				}
			}

		}

		.scroll-Y {
			height: 600rpx;
			border: 1rpx solid #eee;
		}

		.active_wrapper3,
		.active_wrapper4 {
			padding: 30rpx;
		}

		.tag_wrp {
			display: flex;
			flex-wrap: wrap;

			.item {
				flex-basis: 100%;
				text-align: center;
				max-width: calc(100% / 3);
				flex-grow: 1;
			}
		}
	}
</style>